<template>
  <div class="Home">
    <el-container>
      <el-header>
        <div class="home_logo">
          <img src="../assets/heima.jpg" alt="" />
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="back()">退出</el-button>
      </el-header>
      <el-container>
        <el-aside :width="collapse? '64px':'200px'">
            <div class="aside_tool" @click="collapseMenus()">|||</div>
          <!-- 左侧菜单 -->
          <el-menu
            :default-active="activePath"
            background-color="#323744"
            text-color="#fff"
            active-text-color="#409EFF"
            :collapse-transition="false"
            :collapse="collapse"
            router
          >
            <el-submenu :index="item.id+''" v-for="item in menusList" :key="item.id">
                <!-- 一级菜单 -->
              <template slot="title">
                <i :class="iconObject[item.id]" style="font-size:18px"></i>
                <span style="margin-left:10px">{{item.authName}}</span>
              </template>
              <el-menu-item-group v-for="item1 in item.children" :key="item1.id">
                  <!-- 二级菜单 -->
                <el-menu-item :index="item1.path" @click="activePath1(item1.path)">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{item1.authName}}</span>
                  </template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
        // 左侧菜单列表
        menusList:[],
        iconObject:{
            "125":"iconfont icon-yonghuguanli",
            "103":"iconfont icon-quanxianguanli",
            "101":"iconfont icon-shangpinguanli",
            "102":"iconfont icon-dingdanguanli-",
            "145":"iconfont icon-shujutongji"
        },
        activePath:'',
        collapse:false
    };
  },
  created(){
      this.getMenusList();
      this.activePath=window.sessionStorage.getItem('activePath')
  },
  methods: {
    //单击菜单
    activePath1(activepath){
      window.sessionStorage.setItem('activePath',activepath)
      this.activePath=activepath;

    },
    //左侧菜单
    async getMenusList(){
        const {data:res}=await this.$http.get('menus');
        
        if(res.meta.status!==200) return this.$message.error('获取左侧菜单数据失败')
        this.menusList=res.data
       
    },
    back() {
      this.$router.push('/login')
    },
    //菜单的折叠
    collapseMenus(){
        this.collapse=!this.collapse;
    }
  },
};
</script>
<style lang="less" scoped>
.Home {
  height: 100%;
}
.el-container {
  width: 100%;
  height: 100%;
}
.el-header {
  padding-left: 0;
  background-color: #373c41;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .home_logo {
    display: flex;
    align-items: center;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    span {
      color: #fff;
      font-size: 22px;
      margin-left: 15px;
    }
  }
}
.el-aside {
  background-color: #323744;
  .aside_tool{
      height: 25px;
      background-color: #6F7380;
      display: flex;
      justify-content: center;
      letter-spacing: 4px;
      color: white;
  }
}
.el-main {
  background-color: #eaedf2;
}
.el-menu{
    border-right: none;
}
</style>